/* eslint-disable import/first */
import { View, Text } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import "./index.less";
import React from "react";
import { Button } from "@antmjs/vantui";
import { useGlobalVarStore } from "@/store";
import request from "@/utils/request/index";

type TExampleProps = {
  [key: string]: unknown;
};

const Example: React.FC<TExampleProps> = ({}) => {
  /**
   * 从全局Store中获取共享值或dispatch action
   */
  const globalVar = useGlobalVarStore((state) => state.globalVar);
  const setGlobalVar = useGlobalVarStore((state) => state.setGlobalVar);

  useLoad(() => {
    console.log("Page loaded");
  });

  /**
   * 网络请求示例
   */
  const onTestRequest = async () => {
    try {
      const _data = await request.get({
        url: "/todos/1",
      });
      console.log("_data", _data);
    } catch (err) {
      throw new Error(`Error: err`);
    } finally {
      // TODO
    }
  };

  return (
    /*eslint jsx-quotes: 0*/
    <View className="index">
      <Text>Hello World! Taro...</Text>
      <View>
        <Button
          type="primary"
          size="small"
          onClick={() => setGlobalVar({ test: Math.random() })}
        >
          测试VantUI
        </Button>
      </View>
      <View>
        <View className="text-center font-semibold mt-6">
          我是一段使用了Tailwindcss修饰的文字
        </View>
        <View>{JSON.stringify(globalVar)}</View>
      </View>
      <View>
        <Button type="primary" size="small" onClick={() => onTestRequest()}>
          测试发送网络请求
        </Button>
      </View>
    </View>
  );
};

export default Example;
